<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
<!--        <button v-on:click="count++">You clicked me {{ count }} times.这是一个组件内容</button>-->
<!--        <button v-on:click="count++">You clicked me {{ count }} times.这是一个组件内容</button>-->
        {{count}}
        <btn-counter @add="add"></btn-counter>
    </div>
<script src="../js/vue.js"></script>
<script>
    //注册全局组件
    Vue.component("btn-counter", {
        data() {
            return {

            }
        },
        methods: {
            subAdd() {
                console.log("subAdd");
                // this.count++;
                this.$emit("add", 5, "另一个值");
            }
        },
        template: '<button @click="subAdd">点击</button>'
    });
    let app = new Vue({
        el: "#app",
        data: {
            count: 0
        },
        methods: {
            add(step, val) {
                // this.count++;
                this.count += step;
                console.log(val);
            }
        }
    })
</script>
</body>
</html>